<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<!--0. 先引入vue.js-->
	<script src="../js/vue.js"></script>
</head>

<body>
	<!-- 
	可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
	v-on:click 可以简写为 @click
	如果处理函数不需要传参，()可省略
-->
	<div id="app">
		<button @click="change(-1)" >-</button>
		<span>{{n}}</span>
		<button @click="change(+1)">+</button>
	</div>
	<script>

		var vm = new Vue({
			el: "#app",
			data: {
				n: 0
			},
			methods: {
				//本例中，因为页面上只需要一个change函数，所以methods中只添加一个change函数
				//但是页面上调用change()函数时，传入了一个参数值,所以定义change函数时需要
				//定义一个形参来接住实参值
				change(i) {
					//如果i==+1,说明本次想+1
					if (i === 1) {
						this.n++;
					} else {
						//否则如果i!=+1，说明本次想-1
						//只有n>0时，才能-1
						if (this.n > 0) {
							this.n--;
						}
					}
				},
			},
		});
	</script>
</body>

</html>